<template>
    <div :class="['classify',{'border':obj.Layout==='border'}]">
        <h2>{{obj.Subject}}{{index}}</h2>
        <div class="list">
            <dl :class="{'active':activeInd === ind}" v-for="(cItem,ind) in obj.Content" :key="ind" @click="choose(ind,cItem.Type,obj.Subject)"> 
                <dt v-if="cItem.Icon">
                    <img :src="cItem.Icon" alt="">
                </dt>
                <dd>
                    {{cItem.Label}}
                </dd>
            </dl>
        </div>
    </div>
</template>
<script>
// props 数组  对象

//默认值：数组和对象 必须用函数返回默认值
export default {
    // props:['obj'],
    props:{
        obj:{
            type:Object,
            // required:true,  //是否必须要传
            default:function(){
                return {name:'lili'}
            }
        },
        index:{
            type:Number,
            required:false,
            default:1
        }
    },
    data(){
        return {
            activeInd:0
        }
    },
    methods:{
        choose(ind,type,subject){
            this.activeInd = ind;
            this.$emit('chooseFun',subject,type);
        }
    }
}
</script>
<style scoped lang="scss">
    .classify{
        width:100%;
        h2{
            font-size:16px;
        }
        .list{
            width:100%;
            display: flex;
            flex-wrap: wrap;
            dl{
                width:25%;
                img{
                    width:80px;
                    height:80px;
                }
                text-align: center;
                font-size:12px;
                &.active{
                    border:1px solid red;
                }
            }
        }
        &.border{
            dl{
                border:1px solid gray;
                display: flex;
                dt{
                    img{
                        width:30px;
                        height:30px;
                    }
                }
            }
        }
    }
</style>
